<template>
	<view class="time">
		<text>{{ formatDate(time) }} · 抵达地</text>
	</view>
	<view class="info-card Pick-up-card">
		<image src="https://img.js.design/assets/img/66eeb8420c8862f00f3d6524.png#e2a2622660be9d80b873d9307951f057"
			mode="aspectFill"></image>
		<view class="info">
			<text>抵达成都</text>
			<!-- <text class="disposition">焊接机/栈</text> -->
		</view>
	</view>
	<view class="Itinerary-card" v-for="(item,index) in Arrangement_info" :key="index">
		<view class="time-place">
			<text>{{ formatDate(addDays(time, index)) }}</text>
			<text> · </text>
			<text>{{item.scienc_name}}</text>
		</view>
		<view class="info-card Hotel-card " @click="openHotelPopup(item)">
			<image :src="imageUrl + getFirstImage(item.scienc_img)" mode="aspectFill"></image>
			<view class="info">
				<!-- <text>{{item.scienc_name}}</text> -->
				<text class="Hotel-info">{{item.scenic_decr}}</text>
			</view>
		</view>
	</view>
	<view class="info-card Pick-up-card">
		<image src="https://img.js.design/assets/img/66eeb8420c8862f00f3d6524.png#e2a2622660be9d80b873d9307951f057"
			mode="aspectFill"></image>
		<view class="info">
			<text>返回成都</text>
		</view>
	</view>
	<hotelPopupVue v-if="showHotelPopup" :showPopup="showHotelPopup" :selectedItem="selectedItem"
		@closePopup="closeHotelPopup"></hotelPopupVue>
</template>
<script setup>
	import hotelPopupVue from './hotelPopup.vue';

	import {
		ref,
		defineProps,
		watchEffect
	} from 'vue';
	import {
		imageUrl
	} from '@/config/request/request.js'
	const Attractions = ref([])
	const time = ref()
	const showHotelPopup = ref(false)
	const selectedItem = ref(null); // 存储选中的 item
	const props = defineProps({
		TripData: {
			type: Object,
			default: () => {},
		},
		Arrangement_info: {
			type: Array,
			default: () => [],
		}
	});
	watchEffect(() => {
		Attractions.value = props.TripData?.arrangement_info
		time.value = props.TripData?.arrival_time
	});
	const formatDate = (dateString) => {
		const date = new Date(dateString);
		const month = date.getMonth() + 1;
		const day = date.getDate();
		return `${month}月${day < 10 ? '0' + day : day}日`;
	}
	const addDays = (dateString, days) => {
		const date = new Date(dateString);
		date.setDate(date.getDate() + days); // 将当前日期加上指定的天数
		return date.toISOString(); // 返回新的日期格式（ISO字符串）
	}
	const openHotelPopup = (item) => {
		// 处理图片数组
		const processedItem = { ...item };
		if (typeof item.scienc_img === 'string') {
			processedItem.scienc_img = item.scienc_img.split(',').filter(img => img);
		}
		selectedItem.value = processedItem; // 设置处理后的 item
		showHotelPopup.value = true;
	}
	const closeHotelPopup = () => {
		showHotelPopup.value = false;
		selectedItem.value = null; // 清除选中的 item
	};
	const getFirstImage = (imageUrls) => {
		if (!imageUrls) return '';
		if (typeof imageUrls === 'string') {
			const imgArray = imageUrls.split(',');
			return imgArray[0];
		}
		return imageUrls;
	}
</script>

<style lang="scss" scoped>
	.time {
		width: calc(100% - 60rpx);
		display: -webkit-box;
		margin: 20rpx auto;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #969696;

		text {
			color: #969696;
		}
	}

	.Pick-up-card {
		width: calc(100% - 60rpx);
		height: 160rpx;
		margin: 0 auto;
		border: 2rpx solid #f0f0f0;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: end;
		gap: 30rpx;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
		}

		.info {
			display: flex;
			flex-direction: column;
			gap: 10rpx;
			width: calc(100% - 130rpx);
			height: 100%;
			justify-content: center;

			text {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.disposition {
				font-size: 24rpx;
			}
		}
	}

	.Itinerary-card {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.time-place {
			width: 100%;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #969696;

			text {
				color: #969696;
			}
		}

		.info-card {
			width: 100%;
			min-height: 160rpx;
			border: 2rpx solid #f0f0f0;
			border-radius: 20rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: start;
			gap: 30rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
				object-fit: cover;
			}

			.info {
				display: flex;
				flex-direction: column;
				gap: 10rpx;
				width: calc(100% - 130rpx);

				text {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.disposition {
					font-size: 30rpx;
				}

				.Hotel-info {
					display: -webkit-box;
					background-color: #f5f6f7;
					padding: 15rpx 10rpx;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 24rpx;
					color: #999;
					border-radius: 8rpx;
				}
			}
		}
	}
</style>